<template>
    <view class="page">
<!--        <view class="page-official-item">-->
<!--            <view class="official-header">-->
<!--                <view class="official-header-left">-->
<!--                    <img src="/static/img/timg.jpg" />-->
<!--                </view>-->
<!--                <view class="official-header-center">-->
<!--                    <text>官方消息</text>-->
<!--                </view>-->
<!--                <view class="official-header-right">-->
<!--                    <text>2020.02.10</text>-->
<!--                </view>-->
<!--            </view>-->
<!--            <view class="official-content">-->
<!--                <view class="official-content-left">-->
<!--                    <img src="/static/img/123.jpg" />-->
<!--                </view>-->
<!--                <view class="official-content-right">-->
<!--                    您已成功报名【2019艾瑞年度高峰会议数能驱动新变量】活动！-->
<!--                </view>-->
<!--            </view>-->
<!--        </view>-->
        <view class="null" v-if="dataList.length==0">
            暂无系统消息~
        </view>
        <view class="page-system-item" v-for="(item, index) in dataList" :key="index" @click="skipMessageDetail(item.id,item.is_detail)">
            <view class="system-header">
                <view class="system-header-left">
                    <img :src="File_Url+'system-news.png'" />
                </view>
<!--                <view class="system-header-center">-->
<!--                    <text>系统消息</text>-->
<!--                </view>-->
                <view class="system-header-right">
                    <text>{{item.created_at}}</text>
                </view>
            </view>
            <view class="system-content" v-if="item.img_id==0">
                <view class="system-content-text">
                    {{item.title}}
                </view>
            </view>
            <view class="official-content" v-if="item.img_id!=0">
                <view class="official-content-left">
                    <img :src="item.img_url" mode="widthFix" />
                </view>
                <view class="official-content-right">
                    {{item.title}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "systemMessage",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                type: '',
                dataList: []
            }
        },
        onLoad(query){
            this.type = query.type;
            this.getMessageList();
        },
        methods:{
            //获取系统消息列表
            async getMessageList(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    type: this.type
                }
                const res = await this.$api.getMessageList(params);
                if (res.data.level == 'success'){
                    this.dataList = res.data.data
                }
            },
            //跳转到消息详情页
            skipMessageDetail(id,index){
                if (index == 1){
                    uni.navigateTo({
                        url: '/pages/message/messageDetail/messageDetail?messageId='+id
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding: 30rpx;
        height: calc(100vh - 60rpx);
        background: #F8F8F8;
    }
    /*<!--.page-official-item{-->*/
    /*<!--    width: 100%;-->*/
    /*<!--    background: #FFFFFF;-->*/
    /*<!--    border-radius: 10rpx;-->*/
    /*<!--    box-shadow: 0rpx 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);-->*/
    /*<!--    margin-bottom: 30rpx;-->*/
    /*<!--    .official-header{-->*/
    /*<!--        height: 80rpx;-->*/
    /*<!--        @include flex(flex-start);-->*/
    /*<!--        flex-direction: row;-->*/
    /*<!--        border-bottom: 1rpx solid #E5E5E5;-->*/
    /*<!--        .official-header-left{-->*/
    /*<!--            width: 50rpx;-->*/
    /*<!--            height: 50rpx;-->*/
    /*<!--            margin: 0 15rpx;-->*/
    /*<!--            border-radius: 360rpx;-->*/
    /*<!--            overflow: hidden;-->*/
    /*<!--        }-->*/
    /*<!--        .official-header-center{-->*/
    /*<!--            color: #333333;-->*/
    /*<!--            text{-->*/
    /*<!--                font-size: 30rpx;-->*/
    /*<!--                line-height: 42rpx;-->*/
    /*<!--                height: 42rpx;-->*/
    /*<!--            }-->*/
    /*<!--        }-->*/
    /*<!--        .official-header-right{-->*/
    /*<!--            margin-left: auto;-->*/
    /*<!--            color: #9B9B9B;-->*/
    /*<!--            margin-right: 20rpx;-->*/
    /*<!--            text{-->*/
    /*<!--                font-size: 28rpx;-->*/
    /*<!--            }-->*/
    /*<!--        }-->*/
    /*<!--    }-->*/
    /*<!--    .official-content{-->*/
    /*<!--        @include flex(flex-start);-->*/
    /*<!--        flex-direction: row;-->*/
    /*<!--        height: 150rpx;-->*/
    /*<!--        .official-content-left{-->*/
    /*<!--            width: 160rpx;-->*/
    /*<!--            height: 110rpx;-->*/
    /*<!--            border-radius: 10rpx;-->*/
    /*<!--            overflow: hidden;-->*/
    /*<!--            margin: 0 20rpx 0 30rpx;-->*/
    /*<!--        }-->*/
    /*<!--        .official-content-right{-->*/
    /*<!--            width: calc(100% - 240rpx);-->*/
    /*<!--            height: 84rpx;-->*/
    /*<!--            line-height: 42rpx;-->*/
    /*<!--            font-size: 30rpx;-->*/
    /*<!--            @include ellipsis(2);-->*/
    /*<!--        }-->*/
    /*<!--    }-->*/
    /*<!--}-->*/
    .page-system-item{
        width: 100%;
        background: #FFFFFF;
        border-radius: 10rpx;
        box-shadow: 0rpx 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 30rpx;
        .system-header{
            height: 80rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 1rpx solid #E5E5E5;
            .system-header-left{
                width: 50rpx;
                height: 50rpx;
                margin: 0 15rpx;
                border-radius: 360rpx;
                overflow: hidden;
            }
            .system-header-center{
                color: #333333;
                text{
                    font-size: 30rpx;
                    line-height: 42rpx;
                    height: 42rpx;
                }
            }
            .system-header-right{
                margin-left: auto;
                color: #9B9B9B;
                margin-right: 20rpx;
                text{
                    font-size: 28rpx;
                }
            }
        }
        .system-content{
            padding: 20rpx;
            .system-content-text{
                max-height: 210rpx;
                @include ellipsis(5);
                font-size: 30rpx;
                line-height: 42rpx;
            }
        }
        .official-content{
            @include flex(flex-start);
            flex-direction: row;
            padding: 20rpx;
            /*height: 150rpx;*/
            .official-content-left{
                width: 160rpx;
                /*height: 110rpx;*/
                border-radius: 10rpx;
                overflow: hidden;
                margin-right: 20rpx;
            }
            .official-content-right{
                width: calc(100% - 240rpx);
                max-height: 84rpx;
                line-height: 42rpx;
                font-size: 30rpx;
                @include ellipsis(2);
            }
        }
    }
</style>